<template>
  <div class="right">

       <div class="right-hearder">
          <div class="right-box" style="width:56%">
               <div class="ffc">
                  <div class="font">中标数量占比</div>
              </div>
              <div class="kuan">
                 <div id="waves" style="width:80%;height:80%"></div>
              </div>
          </div>
          <div class="left-box" style="width:44%">
               <div class="ffc" style="margin: 0 auto">
                  <div class="font">整体情况</div>
               </div>
                <div class="right-bottom">
                    <div class="bgc">
                          <div style="margin-top:6px">
                             <span class="number" style="margin-right:5px">65</span> <span class="fuhao">%</span>
                          </div>
                          <p class="p">中标69个</p>
                    </div>
                    <div class="bgc m-l36">
                        <div style="margin-top:6px">
                             <span class="number" style="margin-right:5px">65</span> <span class="fuhao">%</span>
                          </div>
                          <p class="p">中标69个</p>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="bgc m-t20">
                          <div style="margin-top:6px">
                             <span class="number" style="margin-right:5px">65</span> <span class="fuhao">%</span>
                          </div>
                          <p class="p">中标69个</p>
                    </div>
                    <div class="bgc m-l36 m-t20">
                        <div style="margin-top:6px">
                             <span class="number" style="margin-right:5px">65</span> <span class="fuhao">%</span>
                          </div>
                          <p class="p">中标69个</p>
                    </div>
                </div>
          </div>
      </div>



       <div class="biao-one">
          <div class="kk">
            <div class="biao-one-title">各地区授权数量与中标数量情况</div>
          </div>
          <div ref="chart1" style="width:100%;height:340px;margin-top:30px"></div>
      </div>

       <div class="biao-one">
          <div class="kk">
            <div class="biao-one-title">各地区授权项目跟进情况</div>
          </div>
          <div ref="chart2" style="width:100%;height:340px;margin-top:30px"></div>
      </div>
      
       <div class="biao-one" style="margin-top:74px">
          <div class="kk">
            <div class="biao-one-title">各行业授权项目跟进情况</div>
          </div>
          <div ref="chart3" style="width:100%;height:340px;margin-top:30px"></div>
      </div>

  </div>
</template>

<script>
export default {
   data(){
     return{

     }
   },
   mounted(){
      this.onEecharts()
      this.twoEcharts()
      this.ThreeEecharts()
      this.yuanEcharts()
   },
   methods:{
     yuanEcharts(){
        var myChart = this.$echarts.init(document.getElementById("waves"));
        var option = {
          backgroundColor: "#0b0f30",
          series: [
            {
              type: "liquidFill",
              radius: "80%",
              data: [0.45],
              color: ["#07b4fa"],
              backgroundStyle: {
                borderWidth: 0.5,
                borderColor: "#092c51",
                color: "#092c51"
              },
              label: {
                color: '#fff',
            },
              outline:{
                // borderDistance: 1,
                  itemStyle:{
                  borderColor:'#04c1fa',
                  borderWidth: 1,
                  }
              }
            }
          ]
        };
         myChart.setOption(option)
         return myChart
     },
      //右边第一张表格
      onEecharts() {
      let myBarChar = this.$echarts.init(this.$refs.chart1);
      myBarChar.setOption({
            tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
            },
            grid: {
             right:"8%"
            },
           legend: {
                data: ['项目数量', '中标数量',],
                left:"4%",
                textStyle:{
                    color:"#fff"
                }
            },
            xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisTick: {
                 alignWithLabel: true
                },
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                },
                 axisLabel:{
                     rotate:-40
                }
            }
            ],
            yAxis: [
              { 
                type: "value",
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                    show:false
                },
                axisLabel:{
                    margin:20,
                }
             },
                {
          name: "%",
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto", //居中显示
            formatter: "{value}%", //以百分比显示
            color:"#fff"
          },
          splitLine: {
            show: false
          }
        }
            ],
            series: [
                   {
                        name: '项目数量',
                        type: 'bar',
                        data: [200, 600, 800, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#61ACD7"
                        },
                    },
                    {
                        name: '中标数量',
                        type: 'line',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#CE537B"
                        },
                    },
                 
            ]
      });
      return myBarChar
    },
        
     //右边第二张表格
      twoEcharts() {
      let myBarChar = this.$echarts.init(this.$refs.chart2);
      myBarChar.setOption({
            tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
            },
            grid: {
             right:"8%"
            },
           legend: {
                data: ['中标数量', '丢单数量', '跟进中数量' , '项目暂停数量', '平均中标率' , '中标率'],
                left:"4%",
                textStyle:{
                    color:"#fff"
                }
            },
            xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisTick: {
                 alignWithLabel: true
                },
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                },
                 axisLabel:{
                     rotate:-40
                }
            }
            ],
            yAxis: [
              { 
                type: "value",
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                    show:false
                },
                axisLabel:{
                    margin:20,
                }
             },
                {
          name: "%",
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto", //居中显示
            formatter: "{value}%", //以百分比显示
            color:"#fff"
          },
          splitLine: {
            show: false
          }
        }
            ],
            series: [
                   {
                        name: '中标数量',
                        type: 'bar',
                        data: [200, 600, 800, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#CE537B"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '丢单数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#5AD8A6"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '跟进中数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#4E7CDB"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '项目暂停数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#D2A31A"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '平均中标率',
                        type: 'line',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#FF7575"
                        },
                    },
                    {
                        name: '中标率',
                        type: 'line',
                        data: [20, 200, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#C7FFC6"
                        },
                    },
                 
            ]
      });
      return myBarChar
    },
     //右边第三张表格
      ThreeEecharts() {
      let myBarChar = this.$echarts.init(this.$refs.chart3);
      myBarChar.setOption({
            tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
            },
            grid: {
             right:"8%"
            },
           legend: {
                data: ['中标数量', '丢单数量', '跟进中数量' , '项目暂停数量', '平均中标率' , '中标率'],
                left:"4%",
                textStyle:{
                    color:"#fff"
                }
            },
            xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisTick: {
                 alignWithLabel: true
                },
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                },
                 axisLabel:{
                     rotate:-40
                }
            }
            ],
            yAxis: [
              { 
                type: "value",
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                    show:false
                },
                axisLabel:{
                    margin:20,
                }
             },
                {
          name: "%",
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto", //居中显示
            formatter: "{value}%", //以百分比显示
            color:"#fff"
          },
          splitLine: {
            show: false
          }
        }
            ],
            series: [
                   {
                        name: '中标数量',
                        type: 'bar',
                        data: [200, 600, 800, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#CE537B"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '丢单数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#5AD8A6"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '跟进中数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#4E7CDB"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '项目暂停数量',
                        type: 'bar',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#D2A31A"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '平均中标率',
                        type: 'line',
                        data: [20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#FF7575"
                        },
                    },
                    {
                        name: '中标率',
                        type: 'line',
                        data: [20, 200, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3,20, 800, 600, 200, 500.6, 100, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#C7FFC6"
                        },
                    },
                 
            ]
      });
      return myBarChar
    },
   }
}
</script>

<style scoped lang="less">
.right{
    margin-top:25px;
   .right-hearder{
       display: flex;
      //  justify-content: space-between;
       .right-box{
        // padding:0 12.7%;
        padding-left: 12.7%;
        padding-right: 12.7%;
         .ffc{
            width:100%;
            height:19px;
            background: linear-gradient(
                90deg,
              rgba(38, 98, 219, 1) 0%,
              rgba(0, 210, 255, 0.28) 100%
            );
            border-radius:17px;
            text-align: center;
            border-top: 1px solid #0E0F33;
            margin-left: 16px;
            .font{
              font-size:20px;
              font-family:PingFangSC-Medium,PingFang SC;
              font-weight:500;
              color:rgba(255,255,255,1);
              margin-top: -16px
            }
         }
         .kuan{
            width:100%;
            height:233px;
            background-image: url("../assets/img/kuan.png");
            background-size: 100% 100%;
            margin-top: 16px;
            display: flex;
            justify-content: center;
            align-items: center
         }

       }
  

        .left-box{
          // margin-left: 102px;
          
           .ffc{
             width:143px;
            height:19px;
            background:linear-gradient(90deg,rgba(38,98,219,1) 0%,rgba(0,210,255,0.28) 100%);
            border-radius:17px;
            border-radius:17px;
            text-align: center;
            border-top: 1px solid #0E0F33;
            // margin-left: 16px;
            .font{
              font-size:20px;
              font-family:PingFangSC-Medium,PingFang SC;
              font-weight:500;
              color:rgba(255,255,255,1);
              margin-top: -16px
            }
         }

          .right-bottom{
            display: flex;
            margin-top: 16px;
            .bgc{
              width:120px;
              height:100px;
              background-image: url("../assets/img/xioakuan.png");
              background-size: 100% 100%;
               text-align: center;
              .number{
                font-size:40px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(255,255,255,1);
              }
              .fuhao{
                font-size:16px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(255,255,255,1);
              }
              .p{
                font-size:14px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(122,246,255,1);
              }
            }
            .m-l36{
              margin-left: 36px
            }
            .m-t20{
              margin-top: 20px
            }
          }
        }






   }


   .biao-one {
    height: 400px;
    width: 100%;
    background-image: url("../assets/img/biankuan.png");
    background-size: 100% 100%;
    margin-top: 50px;
    border-top: 1px solid #0e0f33;
    .biao-one-title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      margin-top: -16px;
    }
    .kk {
      width: 298px;
      height: 20px;
      background: linear-gradient(
        90deg,
        rgba(38, 98, 219, 1) 0%,
        rgba(0, 210, 255, 0.28) 100%
      );
      border-radius: 17px;
      margin: 0 auto;
      border-top: 1px solid rgba(38, 98, 219, 1);
    }
  }
}

</style>